site_8g/src/app/[locale]/(navbar)/vip/List.tsx

import { LevelInfoItem } from "@/api/user";
import { VipRewardTypeMap } from "@/enums";
import clsx from "clsx";
import React from "react";
import styles from "./page.module.scss";

interface Props {
    data: LevelInfoItem[];
    level: number;
    config?: any;
}

const List: React.FC<Props> = ({ data, level = 0, config = {} }) => {
    console.log(VipRewardTypeMap);
    const DataList = React.useMemo(() => {
        const result: any = [];

        if (config?.is_level_up_reward) {
            result.push({
                key: "upgrade",
                text: "Upgrade",
                render(itemData: LevelInfoItem) {
                    return itemData?.reward[0]?.amount || 0;
                },
            });
        }
        if (config?.is_daily_reward) {
            result.push({
                key: "day",
                text: "Daily",
                render(itemData: LevelInfoItem) {
                    return `${itemData.daily_reward_num}(${config?.is_daily_double_reward ? `${itemData.daily_reward_multiple_num}` : ""}`;
                },
            });
        }
        if (config?.is_weekly_reward) {
            result.push({
                key: "week",
                text: "Weekly",
                render(itemData: LevelInfoItem) {
                    return `${itemData.weekly_reward_num}(${config?.is_weekly_double_reward ? `${itemData.weekly_reward_multiple_num}` : ""}`;
                },
            });
        }
        if (config?.is_monthly_reward) {
            result.push({
                key: "month",
                text: "Monthly",
                render(itemData: LevelInfoItem) {
                    return `${itemData.monthly_reward_num}(${config?.is_monthly_double_reward ? `${itemData.monthly_reward_multiple_num}` : ""}`;
                },
            });
        }
        result.push({
            key: "spin",
            text: "Spin",
            render(itemData: LevelInfoItem) {
                return `${itemData?.spin}%`;
            },
        });
        if (config?.is_first_bankruptcy) {
            result.push({
                key: "bankruptcy",
                text: "Bankruptcy",
                render(itemData: LevelInfoItem) {
                    return `${itemData.first_bankruptcy_reward_num}(${config?.is_second_bankruptcy ? `${itemData.second_bankruptcy_reward_num}` : ""}`;
                },
            });
        }

        return result;
    }, [data, config]);

    return (
        <div className={"px-[10px]"}>
            <div className="flex rounded-[var(--borderRadius)] bg-[#fff]">
                <div className={clsx(styles.ListItemBox)}>
                    <div>Level</div>
                    {!!data?.length &&
                        data.map((item) => {
                            return (
                                <div
                                    key={item.id}
                                    className={clsx({
                                        "text-[red]": item.id == level,
                                    })}
                                >
                                    Vip{item.id}
                                </div>
                            );
                        })}
                </div>
                <div className="flex min-w-[0] flex-1 overflow-auto">
                    {DataList.map((item: any) => {
                        return (
                            <div key={item.key} className={clsx(styles.ListItemBox)}>
                                <div>{item.text}</div>
                                {!!data?.length &&
                                    data.map((citem: any) => {
                                        return (
                                            <div
                                                className={clsx({
                                                    "text-[red]": citem.id == level,
                                                })}
                                                key={citem.id}
                                            >
                                                {!!item.render && item.render(citem)}
                                            </div>
                                        );
                                    })}
                            </div>
                        );
                    })}
                </div>
            </div>
        </div>
    );
};

export default List;